import React, { Component } from 'react';
import { withRouter } from "react-router-dom";

import { TabBar } from 'antd-mobile'
import { AppOutline, UserOutline, AppstoreOutline, MessageOutline, ShopbagOutline } from 'antd-mobile-icons'

class Tabbar extends Component {
    state = {
        tabs: [
            {
                key: '/index/home',
                title: '首页',
                icon: <AppOutline />,
            },
            {
                key: '/index/cate',
                title: '分类',
                icon: <AppstoreOutline />,
            },
            {
                key: '/index/ticketholder',
                title: '票夹',
                icon: <ShopbagOutline />,
            },
            {
                key: '/index/news',
                title: '消息',
                icon: <MessageOutline />,
            },
            {
                key: '/index/mine',
                title: '我的',
                icon: <UserOutline />,
            },
        ]
    }
    // componentDidMount() {
    //     this.props.history.push('/index/home')
    // }
    // handleChange(key) {
    //     key == '/index/cate' ?
    //         // this.props.history.push({ pathname: key, state: { id: 282657 } }) :
    //         this.props.history.push(key)
    // }
    handleChange(key) {
        this.props.history.push(key)
    }
    render() {
        return (
            <TabBar className='tabbar' onChange={(key) => { this.handleChange(key) }}>
                {this.state.tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        );
    }
}

export default withRouter(Tabbar);